<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>Pinia 备忘清单
 &#x26;  pinia cheatsheet &#x26;  Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="这是一份 Pinia 状态管理库的备忘单，列出了 Pinia 的常用命令和操作。

入门，为开发人员分享快速参考备忘单。">
<meta keywords="pinia,reference,Quick,Reference,cheatsheet,cheat,sheet">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
<link rel="stylesheet" href="../style/katex.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
  <path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
  <path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
  <path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/pinia.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
  <path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
  <path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="../js/dark.js?v=1.5.5"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="pinia-备忘清单"><svg viewBox="0 0 256 331" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em"><defs><linearGradient id="a" x1="55.342%" x2="42.817%" y1="0%" y2="42.863%"><stop offset="0%" stop-color="#52CE63"></stop><stop offset="100%" stop-color="#51A256"></stop></linearGradient><linearGradient id="b" x1="55.349%" x2="42.808%" y1="0%" y2="42.863%"><stop offset="0%" stop-color="#52CE63"></stop><stop offset="100%" stop-color="#51A256"></stop></linearGradient><linearGradient id="c" x1="50%" x2="50%" y1="0%" y2="58.811%"><stop offset="0%" stop-color="#8AE99C"></stop><stop offset="100%" stop-color="#52CE63"></stop></linearGradient><linearGradient id="d" x1="51.378%" x2="44.585%" y1="17.473%" y2="100%"><stop offset="0%" stop-color="#FFE56C"></stop><stop offset="100%" stop-color="#FFC63A"></stop></linearGradient></defs><path fill="url(#a)" d="M67.56 173.328c30.366-2.985 41.08-27.648 44.735-64.823 3.654-37.175-21.174-70.814-31.502-69.799-10.328 1.015-43.15 40.322-46.805 77.497-3.654 37.175 3.205 60.11 33.572 57.125Z" transform="rotate(-38 72.877 106.136)"></path><path fill="url(#b)" d="M184.454 186.277c30.367 2.986 36.394-20.032 32.74-57.207-3.655-37.175-35.645-76.4-45.973-77.415-10.328-1.015-35.989 32.542-32.334 69.717 3.654 37.175 15.201 61.92 45.567 64.905Z" transform="rotate(52 178.34 119.085)"></path><path fill="url(#c)" d="M129.232 151.601c27.341 0 34.878-26.184 34.878-67.013 0-40.83-25.579-80.843-34.878-80.843S93.605 43.758 93.605 84.588c0 40.829 8.286 67.013 35.627 67.013Z" transform="rotate(7 128.858 77.673)"></path><path fill="url(#d)" d="M113.386 330.307c56.896 0 103.038-16.528 103.038-91.482 0-74.955-46.142-136.462-103.038-136.462-56.897 0-103.002 61.507-103.002 136.462 0 74.954 46.105 91.482 103.002 91.482Z"></path><ellipse cx="165.427" cy="216.677" fill="#EAADCC" rx="14.717" ry="6.845"></ellipse><ellipse cx="57.273" cy="212.57" fill="#EAADCC" rx="14.717" ry="6.845" transform="rotate(7 57.273 212.57)"></ellipse><path d="M96.266 210.285a2.054 2.054 0 1 0-3.406 2.295c3.151 4.676 7.997 7.39 14.373 8.119 6.348.725 12.016-.902 16.877-4.852a2.054 2.054 0 1 0-2.59-3.187c-3.999 3.249-8.563 4.559-13.82 3.958-5.23-.598-8.986-2.7-11.434-6.333ZM65.818 178.63a14.672 14.672 0 0 1 10.551 3.945 14.67 14.67 0 0 1 4.672 10.25 14.671 14.671 0 0 1-3.945 10.55 14.672 14.672 0 0 1-10.25 4.672 14.67 14.67 0 0 1-10.551-3.945 14.672 14.672 0 0 1-4.67-10.25 14.67 14.67 0 0 1 3.944-10.55 14.67 14.67 0 0 1 10.249-4.672Z"></path><path fill="#FFF" d="M66.59 190.932a4.792 4.792 0 1 0-9.578.336 4.792 4.792 0 0 0 9.579-.336Z"></path><path d="M154.99 182.366a14.671 14.671 0 0 1 10.552 3.944 14.67 14.67 0 0 1 4.67 10.25 14.672 14.672 0 0 1-3.944 10.551 14.67 14.67 0 0 1-10.25 4.671 14.671 14.671 0 0 1-10.55-3.945 14.671 14.671 0 0 1-4.672-10.25 14.67 14.67 0 0 1 3.945-10.55 14.671 14.671 0 0 1 10.25-4.671Z"></path><path fill="#FFF" d="M65.71 175.552c9.824-.343 18.066 7.342 18.409 17.165.343 9.824-7.342 18.065-17.166 18.408-9.824.343-18.064-7.342-18.407-17.166-.343-9.823 7.341-18.064 17.164-18.407Zm12.252 17.38c-.224-6.423-5.613-11.448-12.037-11.223-6.422.224-11.447 5.612-11.222 12.035.224 6.424 5.612 11.448 12.035 11.224 6.423-.224 11.448-5.612 11.224-12.036ZM154.883 179.287c9.824-.343 18.065 7.342 18.408 17.165.343 9.824-7.342 18.065-17.165 18.408-9.824.343-18.065-7.342-18.408-17.165-.343-9.824 7.342-18.065 17.165-18.408Zm12.251 17.38c-.224-6.423-5.612-11.447-12.036-11.223-6.423.224-11.448 5.613-11.223 12.036.224 6.423 5.612 11.448 12.035 11.224 6.424-.225 11.448-5.613 11.224-12.037Z"></path><path fill="#FFF" d="M155.763 194.668a4.792 4.792 0 1 0-9.578.335 4.792 4.792 0 0 0 9.578-.335Z"></path><path fill="#ECB732" d="m38.083 243.16 22.33 23.235 16.022-17.044a3.765 3.765 0 0 1 5.486 5.157l-16.283 17.324 23.1 24.036a3.765 3.765 0 1 1-5.43 5.218l-22.834-23.761-10.725 11.41a3.765 3.765 0 1 1-5.486-5.158l10.986-11.688-22.595-23.511a3.765 3.765 0 1 1 5.43-5.218ZM188.04 243.16a3.765 3.765 0 1 1 5.429 5.218l-22.596 23.511 10.988 11.688a3.765 3.765 0 0 1-.042 5.201l-.123.121a3.765 3.765 0 0 1-5.322-.165l-10.725-11.41-22.834 23.762a3.765 3.765 0 0 1-5.197.222l-.127-.116a3.765 3.765 0 0 1-.105-5.324l23.1-24.036-16.284-17.324a3.765 3.765 0 0 1 .042-5.2l.123-.121a3.765 3.765 0 0 1 5.321.164l16.021 17.044 22.331-23.235Z"></path><path fill="#FFC73B" d="M136.602 126.74a3.765 3.765 0 0 1 0 5.323l-17.53 17.531 10.684 10.686a3.765 3.765 0 0 1 .12 5.2l-.12.125a3.765 3.765 0 0 1-5.324 0l-10.686-10.686-10.686 10.686a3.765 3.765 0 1 1-5.324-5.325l10.685-10.686-17.53-17.53a3.765 3.765 0 0 1-.12-5.2l.12-.125a3.765 3.765 0 0 1 5.324 0l17.531 17.53 17.531-17.53a3.765 3.765 0 0 1 5.325 0Z"></path></svg><a aria-hidden="true" tabindex="-1" href="#pinia-备忘清单"><span class="icon icon-link"></span></a>Pinia 备忘清单</h1><div class="wrap-body">
<p>这是一份 <a href="https://pinia.vuejs.org/"><code>Pinia</code></a> 状态管理库的备忘单，列出了 Pinia 的常用命令和操作。</p>
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
  <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#安装-pinia">安装 Pinia</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#定义-store">定义 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#创建-pinia-实例">创建 Pinia 实例</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#热重载-store">热重载 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-store">使用 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#modules-模式">Modules 模式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-options-api">使用 Options API</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#高级用法">高级用法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用组合函数">使用组合函数</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#插件">插件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#持久化状态">持久化状态</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#1-安装--pinia-plugin-persist">1. 安装  pinia-plugin-persist</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#2-配置-pinia-和-pinia-plugin-persist">2. 配置 Pinia 和 pinia-plugin-persist</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#3-创建-store-并启用持久化">3. 创建 Store 并启用持久化</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#4-使用-store">4. 使用 Store</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#ssr-支持">SSR 支持</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-vue-devtools">使用 Vue Devtools</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用异步-actions">使用异步 Actions</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#测试-pinia-store">测试 Pinia Store</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#另见">另见</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="安装-pinia"><a aria-hidden="true" tabindex="-1" href="#安装-pinia"><span class="icon icon-link"></span></a>安装 Pinia</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span> <span class="token function">install</span> pinia
</span><span class="code-line"><span class="token comment"># or</span>
</span><span class="code-line"><span class="token function">yarn</span> <span class="token function">add</span> pinia
</span><span class="code-line"><span class="token comment"># or</span>
</span><span class="code-line"><span class="token function">pnpm</span> <span class="token function">add</span> pinia
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="定义-store"><a aria-hidden="true" tabindex="-1" href="#定义-store"><span class="icon icon-link"></span></a>定义 Store</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2 row-span-2-->
<p>创建一个 store 文件（例如 <code>src/stores/counter.js</code>），并定义 <code>store</code></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useCounterStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'counter'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
</span><span class="code-line">    <span class="token punctuation">}</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token function-variable function">doubleCount</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> state<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">*</span> <span class="token number">2</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="创建-pinia-实例"><a aria-hidden="true" tabindex="-1" href="#创建-pinia-实例"><span class="icon icon-link"></span></a>创建 Pinia 实例</h3><div class="wrap-body">
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App.vue'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line">app<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span>
</span><span class="code-line">app<span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></code></pre>
<p>在你的 <a href="./vue.html">Vue</a> 应用中创建一个 Pinia 实例并将其传递给 <a href="./vue.html">Vue</a></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="热重载-store"><a aria-hidden="true" tabindex="-1" href="#热重载-store"><span class="icon icon-link"></span></a>热重载 Store</h3><div class="wrap-body">
<p>使用 Vite 时，你可以启用热重载功能：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span><span class="token keyword module">import</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">hot</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token keyword module">import</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">hot</span><span class="token punctuation">.</span><span class="token method function property-access">accept</span><span class="token punctuation">(</span><span class="token function">acceptHMRUpdate</span><span class="token punctuation">(</span>useCounterStore<span class="token punctuation">,</span> <span class="token keyword module">import</span><span class="token punctuation">.</span><span class="token property-access">meta</span><span class="token punctuation">.</span><span class="token property-access">hot</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="使用-store"><a aria-hidden="true" tabindex="-1" href="#使用-store"><span class="icon icon-link"></span></a>使用 Store</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>在组件中使用 <code>store</code></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token operator">&#x3C;</span>template<span class="token operator">></span>
</span><span class="code-line">  <span class="token operator">&#x3C;</span>div<span class="token operator">></span>
</span><span class="code-line">    <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token maybe-class-name">Count</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> counterStore<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line">    <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token maybe-class-name">Double</span> <span class="token maybe-class-name">Count</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> counterStore<span class="token punctuation">.</span><span class="token property-access">doubleCount</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line">    <span class="token operator">&#x3C;</span>button @click<span class="token operator">=</span><span class="token string">"counterStore.increment"</span><span class="token operator">></span><span class="token maybe-class-name">Increment</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>button<span class="token operator">></span>
</span><span class="code-line">  <span class="token operator">&#x3C;</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>template<span class="token operator">></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token operator">&#x3C;</span>script<span class="token operator">></span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line">      counterStore
</span><span class="code-line">    <span class="token punctuation">}</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="modules-模式"><a aria-hidden="true" tabindex="-1" href="#modules-模式"><span class="icon icon-link"></span></a>Modules 模式</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>Pinia 不使用传统的 Vuex 模块模式。相反，推荐使用独立的 store 文件：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/stores/user.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useUserStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'user'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Alice'</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token function">setName</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token operator">=</span> name
</span><span class="code-line">    <span class="token punctuation">}</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token function-variable function">isAdult</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> state<span class="token punctuation">.</span><span class="token property-access">age</span> <span class="token operator">>=</span> <span class="token number">18</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-options-api"><a aria-hidden="true" tabindex="-1" href="#使用-options-api"><span class="icon icon-link"></span></a>使用 Options API</h3><div class="wrap-body">
<p>如果你更喜欢 Options API，可以这样使用 Pinia：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token operator">&#x3C;</span>script<span class="token operator">></span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line">      counterStore
</span><span class="code-line">    <span class="token punctuation">}</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="高级用法"><a aria-hidden="true" tabindex="-1" href="#高级用法"><span class="icon icon-link"></span></a>高级用法</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用组合函数"><a aria-hidden="true" tabindex="-1" href="#使用组合函数"><span class="icon icon-link"></span></a>使用组合函数</h3><div class="wrap-body">
<p>你可以将 store 与组合函数一起使用：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/composables/useCounter.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">useCounter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token literal-property property">count</span><span class="token operator">:</span> counterStore<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token literal-property property">doubleCount</span><span class="token operator">:</span> counterStore<span class="token punctuation">.</span><span class="token property-access">doubleCount</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token literal-property property">increment</span><span class="token operator">:</span> counterStore<span class="token punctuation">.</span><span class="token property-access">increment</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="插件"><a aria-hidden="true" tabindex="-1" href="#插件"><span class="icon icon-link"></span></a>插件</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>Pinia 支持插件。你可以编写插件来扩展 Pinia 的功能：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/plugins/piniaPlugin.js</span>
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">piniaPlugin</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> store <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">  store<span class="token punctuation">.</span><span class="token method function property-access">$onAction</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> store<span class="token punctuation">,</span> args<span class="token punctuation">,</span> after<span class="token punctuation">,</span> onError <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Action </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> was called with args:</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> args<span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token comment">// main.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> piniaPlugin <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./plugins/piniaPlugin'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">pinia<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>piniaPlugin<span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-exist row-span-4 col-span-2"><div class="wrap-header h3wrap"><h3 id="持久化状态"><a aria-hidden="true" tabindex="-1" href="#持久化状态"><span class="icon icon-link"></span></a>持久化状态</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4 col-span-2-->
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="1-安装--pinia-plugin-persist"><a aria-hidden="true" tabindex="-1" href="#1-安装--pinia-plugin-persist"><span class="icon icon-link"></span></a>1. 安装  <code>pinia-plugin-persist</code></h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token function">npm</span>  pinia-plugin-persist
</span></code></pre>
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="2-配置-pinia-和-pinia-plugin-persist"><a aria-hidden="true" tabindex="-1" href="#2-配置-pinia-和-pinia-plugin-persist"><span class="icon icon-link"></span></a>2. 配置 Pinia 和 <code>pinia-plugin-persist</code></h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<p>在你的入口文件中配置 Pinia 和 <code>pinia-plugin-persist</code>。</p>
<p><strong>⚠️ Vue 2 项目</strong></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Vue</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">vueCompositionApi</span> <span class="token keyword module">from</span> <span class="token string">'@vue/composition-api'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia<span class="token punctuation">,</span> <span class="token maybe-class-name">PiniaVuePlugin</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">piniaPersist</span> <span class="token keyword module">from</span> <span class="token string">'pinia-plugin-persist'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App.vue'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>vueCompositionApi<span class="token punctuation">)</span>
</span><span class="code-line"><span class="token maybe-class-name">Vue</span><span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span><span class="token maybe-class-name">PiniaVuePlugin</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">pinia<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>piniaPersist<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line">  pinia<span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token arrow operator">=></span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></code></pre>
<p><strong>Vue 3 项目：</strong></p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createApp <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">piniaPersist</span> <span class="token keyword module">from</span> <span class="token string">'pinia-plugin-persist'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App.vue'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">pinia<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>piniaPersist<span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token punctuation">.</span><span class="token method function property-access">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</span></code></pre>
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="3-创建-store-并启用持久化"><a aria-hidden="true" tabindex="-1" href="#3-创建-store-并启用持久化"><span class="icon icon-link"></span></a>3. 创建 Store 并启用持久化</h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<p>创建一个 Pinia store，并启用持久化存储。</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// stores/userStore.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useUserStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'userStore'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token literal-property property">firstName</span><span class="token operator">:</span> <span class="token string">'S'</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token literal-property property">lastName</span><span class="token operator">:</span> <span class="token string">'L'</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token literal-property property">accessToken</span><span class="token operator">:</span> <span class="token string">'xxxxxxxxxxxxx'</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token function">setToken</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">accessToken</span> <span class="token operator">=</span> value
</span><span class="code-line">    <span class="token punctuation">}</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token literal-property property">persist</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token literal-property property">strategies</span><span class="token operator">:</span> <span class="token punctuation">[</span>
</span><span class="code-line">      <span class="token punctuation">{</span>
</span><span class="code-line">        <span class="token literal-property property">storage</span><span class="token operator">:</span> <span class="token dom variable">localStorage</span><span class="token punctuation">,</span>
</span><span class="code-line">        <span class="token literal-property property">paths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'accessToken'</span><span class="token punctuation">]</span>
</span><span class="code-line">      <span class="token punctuation">}</span>
</span><span class="code-line">    <span class="token punctuation">]</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
<h4 style="color:#228e6c;font-weight: bold;text-align: left;" id="4-使用-store"><a aria-hidden="true" tabindex="-1" href="#4-使用-store"><span class="icon icon-link"></span></a>4. 使用 Store</h4>
<!--rehype:style=color:#228e6c;font-weight: bold;text-align: left;-->
<p>在组件中使用创建好的 store。</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/components/SomeComponent.vue</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span>template<span class="token operator">></span>
</span><span class="code-line">  <span class="token operator">&#x3C;</span>div<span class="token operator">></span>
</span><span class="code-line">    <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> userStore<span class="token punctuation">.</span><span class="token property-access">firstName</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> userStore<span class="token punctuation">.</span><span class="token property-access">lastName</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line">    <span class="token operator">&#x3C;</span>p<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> userStore<span class="token punctuation">.</span><span class="token property-access">accessToken</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&#x3C;</span><span class="token operator">/</span>p<span class="token operator">></span>
</span><span class="code-line">  <span class="token operator">&#x3C;</span><span class="token operator">/</span>div<span class="token operator">></span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>template<span class="token operator">></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token operator">&#x3C;</span>script<span class="token operator">></span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useUserStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/userStore'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token keyword">const</span> userStore <span class="token operator">=</span> <span class="token function">useUserStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">    
</span><span class="code-line">    <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> userStore <span class="token punctuation">}</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token operator">&#x3C;</span><span class="token operator">/</span>script<span class="token operator">></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="ssr-支持"><a aria-hidden="true" tabindex="-1" href="#ssr-支持"><span class="icon icon-link"></span></a>SSR 支持</h3><div class="wrap-body">
<p>Pinia 支持服务端渲染 (SSR)。在你的 SSR 入口文件中创建 Pinia 实例：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createSSRApp</span><span class="token punctuation">(</span><span class="token maybe-class-name">App</span><span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token keyword">const</span> pinia <span class="token operator">=</span> <span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line">  app<span class="token punctuation">.</span><span class="token method function property-access">use</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span> app<span class="token punctuation">,</span> pinia <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>明白了，让我们来结合 <code>pinia-plugin-persist</code> 插件完善 Pinia 备忘清单。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-vue-devtools"><a aria-hidden="true" tabindex="-1" href="#使用-vue-devtools"><span class="icon icon-link"></span></a>使用 Vue Devtools</h3><div class="wrap-body">
<p>Pinia 可以与 Vue Devtools 一起使用。确保你安装了最新版本的 Vue Devtools，然后你可以在 Devtools 中查看和调试你的 Pinia store。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用异步-actions"><a aria-hidden="true" tabindex="-1" href="#使用异步-actions"><span class="icon icon-link"></span></a>使用异步 Actions</h3><div class="wrap-body">
<p>Pinia 支持在 actions 中使用异步代码：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// src/stores/todo.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports">axios</span> <span class="token keyword module">from</span> <span class="token string">'axios'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> useTodoStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'todo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token literal-property property">todos</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token keyword">async</span> <span class="token function">fetchTodos</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line">      <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword control-flow">await</span> axios<span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">'/api/todos'</span><span class="token punctuation">)</span>
</span><span class="code-line">      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">todos</span> <span class="token operator">=</span> response<span class="token punctuation">.</span><span class="token property-access">data</span>
</span><span class="code-line">    <span class="token punctuation">}</span>
</span><span class="code-line">  <span class="token punctuation">}</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="测试-pinia-store"><a aria-hidden="true" tabindex="-1" href="#测试-pinia-store"><span class="icon icon-link"></span></a>测试 Pinia Store</h3><div class="wrap-body">
<p>你可以使用 Vue Test Utils 和 Jest 来测试你的 Pinia store：</p>
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line"><span class="token comment">// __tests__/counterStore.test.js</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> setActivePinia<span class="token punctuation">,</span> createPinia <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'pinia'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useCounterStore <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@/stores/counter'</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">'Counter Store'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token function">setActivePinia</span><span class="token punctuation">(</span><span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line">  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'increments the count'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">    <span class="token function">expect</span><span class="token punctuation">(</span>counterStore<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
</span><span class="code-line">    counterStore<span class="token punctuation">.</span><span class="token method function property-access">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">    <span class="token function">expect</span><span class="token punctuation">(</span>counterStore<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line">
</span><span class="code-line">  <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">'returns double count'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token keyword">const</span> counterStore <span class="token operator">=</span> <span class="token function">useCounterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line">    counterStore<span class="token punctuation">.</span><span class="token property-access">count</span> <span class="token operator">=</span> <span class="token number">2</span>
</span><span class="code-line">    <span class="token function">expect</span><span class="token punctuation">(</span>counterStore<span class="token punctuation">.</span><span class="token property-access">doubleCount</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">toBe</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://pinia.vuejs.org/">Pinia 官方文档</a></li>
<li><a href="https://github.com/vuejs/pinia">Pinia GitHub 仓库</a></li>
<li><a href="https://pinia.vuejs.org/getting-started.html">Pinia 快速上手</a></li>
<li><a href="https://seb-l.github.io/pinia-plugin-persist/basic-usage.html">pinia-plugin-persist 官方文档</a></li>
</ul>
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&#x26;A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.5.5" defer></script><script src="../js/fuse.min.js?v=1.5.5" defer></script><script src="../js/main.js?v=1.5.5" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
